<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>【动画进阶】极具创意的鼠标交互动画</title>
    <link rel="stylesheet" href="../../styles/scss/animation.css" />
  </head>
  <body style="margin: 0">
    <div class="seven-container">
      <div id="g-pointer-1"></div>
      <div id="g-pointer-2"></div>
      <div class="test1">
        <div></div>
        <div></div>
        <div></div>
      </div>

      <div class="test2">
        <div></div>
      </div>
      <!--妙用混合模式实现文字镂空波浪效果-->
      <div class="test3">
        <p>TEXT WAVE</p>
      </div>

      <!--利用混合模式实现叠加效果-->
      <div class="test4">
        <div class="g-animation">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
          quaerat ipsam fugit fugiat cupiditate asperiores neque libero natus
          atque, suscipit error esse inventore numquam molestiae quas laborum
          eius debitis cum? Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Reiciendis quaerat ipsam fugit fugiat cupiditate asperiores
          neque libero natus atque, suscipit error esse inventore numquam
          molestiae quas laborum eius debitis cum?
        </div>
        <div
          class="g-animation"
          style="width: 300px; background-color: orangered"
        >
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
          quaerat ipsam fugit fugiat cupiditate asperiores neque libero natus
          atque, suscipit error esse inventore numquam molestiae quas laborum
          eius debitis cum? Lorem ipsum dolor sit
        </div>
        <div
          class="g-animation"
          style="
            border-radius: 100%;
            width: 140px;
            height: 140px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: blueviolet;
          "
        >
          Lorem ipsum dolor sit amet co
        </div>
      </div>
    </div>

    <script>
      const clazz = "g-animation";
      let isHovering = false;
      const test4 = document.querySelector(".test4");
      const element1 = document.getElementById("g-pointer-1");
      const element2 = document.getElementById("g-pointer-2");
      const container = document.querySelector(".seven-container");
      const halfAlementWidth1 = element1.offsetWidth / 2;
      const halfAlementWidth2 = element2.offsetWidth / 2;
      function setPosition(x, y) {
        window.requestAnimationFrame(function () {
          element1.style.transform = `translate(${x - halfAlementWidth1}px, ${
            y - halfAlementWidth1
          }px)`;

          if (!isHovering) {
            element2.style.transform = `translate(${x - halfAlementWidth2}px, ${
              y - halfAlementWidth2
            }px)`;
          }
        });
      }
      test4.addEventListener("click", () => {
        console.log(1);
      });
      window.addEventListener("mouseout", (event) => {
        const target = event.target;
        if (target.classList.contains(clazz)) {
          console.log("mouseout");
          isHovering = false;

          // 样式复原
          element2.style.width = `42px`;
          element2.style.height = `42px`;
          element2.style.borderRadius = `50%`;
        }
      });
      container.addEventListener("mousemove", (event) => {
        const target = event.target;

        if (target.classList.contains(clazz)) {
          console.log("mouseover");
          isHovering = true;
          /**
           * 1计算出目标元素的坐标及高宽
           * 2修改elment2的宽度和radius, transform
           */
          const rect = target.getBoundingClientRect();
          const style = window.getComputedStyle(target);
          console.log(rect.left);
          element2.style.width = `${rect.width + 20}px`;
          element2.style.height = `${rect.height + 20}px`;
          element2.style.borderRadius = `${style.borderRadius}`;
          element2.style.transform = `translate(${rect.left - 10}px, ${
            rect.top - 10
          }px)`;
        }
        window.requestAnimationFrame(function () {
          setPosition(event.clientX, event.clientY);
        });
      });
    </script>
  </body>
</html>
